<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    
<title>Project: Switch and Meter</title>

    
<link rel="stylesheet" type="text/css" href="CSS/switch_style.css" />

    
<link rel="stylesheet" type="text/css" href="CSS/meter_style.css" />

    
<link rel="stylesheet" type="text/css" href="CSS/graph_style.css" />

    
<link rel="stylesheet" type="text/css" href="CSS/line_style.css" />

    
<link rel="stylesheet" type="text/css" href="CSS/button_style.css" />

    
<link rel="stylesheet" type="text/css" href="CSS/slider_style.css" />

    
<link rel="stylesheet" type="text/css" href="CSS/appliance_style.css" />

    
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    
<script type="text/javascript" src="jquery.svg.package-1.4.3/jquery.svg.min.js"></script>
    
<script type="text/javascript" src="jquery.svg.package-1.4.3/jquery.svganim.min.js"></script>
    
<script type="text/javascript" src="arrows.js"></script>
    
<script type="text/javascript" src="device-sounds.js"></script>
    
<script type="text/javascript" src="arrows-power-consumption.js"></script>
    
<script type="text/javascript" src="sim-main.js"></script>
  </head>
<body>
    
<h1> Power Usage Simulator </h1>

    
<h2> </h2>

    
<div id="transmission_tower"><img src="img/transmissiontower.png" /></div>

    
<div class="switch" id="switch1_svg" tabindex="0" role="checkbox" aria-checked="true"> </div>

    
<div class="switch" id="switch2_svg" tabindex="0" role="checkbox" aria-checked="true"> </div>

    
<div class="switch" id="switch3_svg" tabindex="0" role="checkbox" aria-checked="true"> </div>

    
<div class="switch" id="switch4_svg" tabindex="0" role="checkbox" aria-checked="true"> </div>

    
<div class="meter" id="meter_svg" aria-activedescendent="power" role="list"> </div>

    
<div class="meter" id="watts_svg"> </div>

    
<div class="meter" id="bill_svg"> </div>

    
<div> 
  <div id="sound_toggle">
	Sound on/off:
	
	<input type="radio" id="sound_on_radio" name="sound toggle group" value="sound on" />
	<input type="radio" id="sound_off_radio" name="sound toggle group" value="sound off" />
  </div>

  <input type="button" id="start_time_button" value="Start Time"> </input> 
  <input type="button" id="pause_time_button" value="Pause Time"> </input>
  <input type="button" id="reset_time_button" value="Reset Time"> </input>
  

</div>

    
<div class="bill_slider" id="bill_cost_text">Cost of electricity:
      5.0 cents per kWh</div>

    
<div class="bill_slider" tabindex="0" id="bill_slider_svg" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"> </div>

    
<div class="power_line" id="arrow_svg"> </div>

    
<div class="graph" id="graph_svg"> </div>

    
<div id="appliance1"><img src="img/vacuum.png" /></div>

    
<div id="appliance2"><img src="img/hairdryer.png" /></div>

    
<div id="appliance3"><img src="img/dishwasher.png" /></div>

  </body>
</html>